<template>
	<div class="main_part">
		<div>
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="onTabClick" tabPosition="left">
			<el-tab-pane v-for="(item, index) in map" :key="index" :label="item.tableTitle" :name="index">
				<div class="list_part">
					<el-empty v-if="itemList.length == 0" description="暂无数据" />
					<template v-if="itemList.length > 0">
						<div class="card_part" v-for="el in itemList" :key="el.id">
							<!-- 标题 -->
							<div v-if="!el.optionList" class="item_title">
								{{ el.itemTitle }}
							</div>
							<!-- 题目 -->
							<div v-if="el.levelsOfTitle > 2 && el.optionList" class="item_question">
								{{ el.itemTitle }}
								<div class="question_option">
									<!--itemType==1单选  -->
									<div v-if="el.itemType == 1" class="option_part">
										<!-- <radio-group  @change="(e)=>changeData(e,el)">
										<label style="margin-right: 30rpx;" v-for="(option,ind) in el.optionList" :key="option.id"><radio :value="ind" />{{option.optionContent}}</label>
									</radio-group> -->
										<el-radio-group  v-model="el.bscAssessTableAnswer.content" @change="(e)=>changeData(el)">
											<el-radio v-for="option in el.optionList" :label="option.id" :disabled="isDisable">{{ option.optionContent }}</el-radio>
										</el-radio-group>
									</div>
									<!--itemType==2多选  -->
									<div v-if="el.itemType == 2" class="">
										<!-- <checkbox-group @change="(e)=>changeData(e,el)">
										<label v-for="(option,ind) in el.optionList" :key="option.id">
											<checkbox :value="ind"/>选中
										</label>
									</checkbox-group> -->
									</div>
									<!--itemType==3文本  -->
									<div v-if="el.itemType == 3" class=""></div>
									<!--itemType==4 表格 -->
									<div v-if="el.itemType == 4" class=""></div>
									<!--itemType==5 填空  -->
									<div v-if="el.itemType == 5" class=""></div>
									<!--itemType==6 图片文件上传  -->
									<div v-if="el.itemType == 6" class=""></div>
								</div>
								<div class="">
									<div style="margin: 20rpx auto">评估情况说明</div>
									<el-input v-model="el.bscAssessTableAnswer.extendContent" placeholder="请输入内容" :disabled="isDisable" @blur="changeData(el)"></el-input>
								</div>
							</div>
						</div>
					</template>
				</div>
				<AplidPaginate :total="pageTotal" :current="pageNum" :size="pageSize" @change="pageChange"></AplidPaginate>
			</el-tab-pane>
		</el-tabs>
		</div>
		<div v-if="!isDisable" class="submit_btn">
			<el-button type="primary"  @click="toSunbmit">提交</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import apiMod from '@/apiMod/index'
import AplidPaginate from '@/components/AplidCrud/src/AplidPaginate/index'
type Props = {
	ifShowSearch?: any,
	nowRowData?: any,
	isDisable?:any
}
const props = withDefaults(defineProps<Props>(), {
	ifShowSearch: true,
	nowRowData: {},
	isDisable:false
})
let emit = defineEmits(['refresh'])
let itemList: any = ref([])
let map = ref([])
let activeName = ref(0)
const initDat = async () => {
	let params = {
		assessType: 2, // 2代表机构等级评估
	}
	let res = await apiMod.view_bscAssessTableInfo_list(params)
	map.value = res.data
	chageType(map.value[activeName.value].id)
}
initDat()
// 提交
const toSunbmit  = () =>{
	let data = JSON.parse(JSON.stringify(props.nowRowData))
	data.id = data.taskItemId
	apiMod.view_serviceOrgAccess_update(data).then(res=>{
		if(res.code == 0){
			ElMessage.success('提交成功')
			initDat()
			emit('refresh')
		}
	})
}
let evaluated = ref(0)
let noAssessment = ref(0)
let pageTotal = ref(0)
let pageSize = ref(10)
let pageNum = ref(1)
// 页码改变
const pageChange = (data) => {
	console.log('fdf', data)
	pageNum.value = data.current
	pageSize.value = data.size
	chageType(map.value[activeName.value].id)
}
// 改变大类
const chageType = async (tableId: any) => {
	evaluated.value = 0
	noAssessment.value = 0
	let params = {
		assessType: 2,
		tableId: tableId,
		taskItemId: props.nowRowData.taskItemId,
		pageParaPO: { size: pageSize.value, current: pageNum.value },
	}
	let res = await apiMod.view_bscAssessTableItem_page(params)
	pageTotal.value = res.data.total
	itemList.value = res.data.records
	itemList.value.forEach((el: any) => {
		// 是题目
		if (el.levelsOfTitle > 2 && el.optionList) {
			if (!el.bscAssessTableAnswer) {
				noAssessment.value++
				el.bscAssessTableAnswer = { content: '' }
				el.bscAssessTableAnswer = { extendContent: '' }
			} else {
				evaluated.value++
			}
		}
	})
}

const onTabClick = (tab) => {
	activeName.value = tab.paneName
	chageType(map.value[activeName.value].id)
}
const toUploadAnswer = async(el)=>{
	let params = {
			extendContent:el.bscAssessTableAnswer.extendContent,
			answerType:el.itemType,
			content:el.bscAssessTableAnswer.content, //选项的id
			tableId:el.tableId,
			assessType:el.assessType,
			tableTitle:el.tableId, // 
			taskId:props.nowRowData.taskId,	// 需要传入
			taskItemId:props.nowRowData.taskItemId,
			taskName:props.nowRowData.taskName, // 需要传入
			itemId:el.id,
			itemTitle:el.itemTitle
		}
		console.log('el',params)
		let res = await apiMod.view_bscAssessTableAnswer_addOrUpdateAnswer(params)
		if(res){
			//刷新
			chageType(map.value[activeName.value].id)
			ElMessage.success('已保存')
		}
}
const changeData = (el) => {
	toUploadAnswer(el)
}
</script>

<style scoped>
.main_part{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
.submit_btn{
	margin-top: 20px;
}
.list_part {
	height: 60vh;
	overflow: auto;
	margin: 10px auto;
}
.card_part {
	min-height: 50px;
	background-color: #f8f8f8;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 15px;
	margin-bottom: 10px;

	.item_title {
		font-weight: 700;
	}
}
</style>
